WebXR Hit Test Manager: Implementatie van een Ray Casting Systeem voor Immersieve Ervaringen

De opkomst van Augmented Reality (AR) en Virtual Reality (VR) technologieën heeft spannende nieuwe mogelijkheden geopend voor het creëren van immersieve en interactieve digitale ervaringen. WebXR, een JavaScript API voor toegang tot VR- en AR-mogelijkheden in webbrowsers, stelt ontwikkelaars wereldwijd in staat om deze ervaringen te bouwen op een veelvoud aan apparaten. Een belangrijk onderdeel bij het creëren van boeiende WebXR-ervaringen is de mogelijkheid om te interageren met de virtuele omgeving. Dit is waar de WebXR Hit Test Manager en ray casting om de hoek komen kijken.

Wat is Ray Casting en Waarom is het Belangrijk?

Ray casting, in de context van WebXR, is een techniek die wordt gebruikt om te bepalen of een virtuele straal (een rechte lijn) een virtueel object in de AR-omgeving snijdt die door het AR-systeem is gedetecteerd, of een virtueel object in de VR-omgeving. Denk eraan als het schijnen van een laserpointer op je omgeving en zien waar deze raakt. De WebXR Hit Test Manager biedt de tools om deze ray casts uit te voeren en de resultaten op te halen. Deze informatie is cruciaal voor een verscheidenheid aan interacties, waaronder:

• Object Plaatsing: Gebruikers in staat stellen om virtuele objecten op echte oppervlakken te plaatsen, zoals het zetten van een virtuele stoel in hun woonkamer (AR). Denk aan een gebruiker in Tokio die virtueel hun appartement inricht voordat meubels worden aangeschaft.
• Doelgerichtheid en Selectie: Gebruikers in staat stellen om virtuele objecten te selecteren of te interageren met UI-elementen met behulp van een virtuele pointer of hand (AR/VR). Stel je een chirurg in Londen voor die AR gebruikt om anatomische informatie over een patiënt te projecteren en specifieke gebieden voor beoordeling selecteert.
• Navigatie: Het bewegen van de avatar van de gebruiker door de virtuele wereld door naar een locatie te wijzen en instructies te geven om ernaartoe te bewegen (VR). Een museum in Parijs zou VR kunnen gebruiken om bezoekers door historische tentoonstellingen te laten navigeren.
• Gebarenherkenning: Hit testing combineren met handtracking om gebaren van de gebruiker te interpreteren, zoals knijpen om in te zoomen of vegen om te scrollen (AR/VR). Dit zou gebruikt kunnen worden in een gezamenlijke ontwerpbijeenkomst in Sydney, waar deelnemers virtuele modellen samen manipuleren.

Begrijpen van de WebXR Hit Test Manager

De WebXR Hit Test Manager is een essentieel onderdeel van de WebXR API dat ray casting faciliteert. Het biedt methoden voor het creëren en beheren van hit test bronnen, die de oorsprong en richting van de straal definiëren. De manager gebruikt deze bronnen vervolgens om hit tests uit te voeren tegen de echte wereld (in AR) of de virtuele wereld (in VR) en retourneert informatie over eventuele snijpunten. Belangrijke concepten zijn:

• XRFrame: De XRFrame vertegenwoordigt een momentopname van de XR-scène, inclusief de pose van de kijker en eventuele gedetecteerde vlakken of kenmerken. Hit tests worden uitgevoerd tegen de XRFrame.
• XRHitTestSource: Vertegenwoordigt de bron van de te werpen straal. Het definieert de oorsprong (waar de straal begint) en de richting (waar de straal naartoe wijst). Je maakt doorgaans één XRHitTestSource per invoermethode (bijvoorbeeld een controller, een hand).
• XRHitTestResult: Bevat informatie over een succesvolle hit, inclusief de pose (positie en oriëntatie) van het snijpunt en de afstand tot de oorsprong van de straal.
• XRHitTestTrackable: Vertegenwoordigt een getrackt kenmerk (zoals een vlak) in de echte wereld.

Implementatie van een Basis Hit Test Systeem

Laten we de stappen doorlopen om een basis WebXR hit test systeem te implementeren met behulp van JavaScript. Dit voorbeeld richt zich op AR-objectplaatsing, maar de principes kunnen worden aangepast voor andere interactiescenario's.

Stap 1: WebXR Sessie en Hit Test Ondersteuning Aanvragen

Eerst moet je een WebXR-sessie aanvragen en ervoor zorgen dat de 'hit-test' functie is ingeschakeld. Deze functie is vereist voor het gebruik van de Hit Test Manager.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR sessie beëindigd');
    });

    // Initialiseer hier je WebGL renderer en scène
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR initialisatie mislukt', e);
  }
}

            

              
                Copy
              
            
          

Uitleg:

• `navigator.xr.requestSession('immersive-ar', ...)`: Vraagt een immersieve AR-sessie aan. Het eerste argument specificeert het sessietype ('immersive-ar' voor AR, 'immersive-vr' voor VR).
• `requiredFeatures: ['hit-test']`: Vraagt cruciaal de 'hit-test' functie aan, waardoor de Hit Test Manager wordt ingeschakeld.
• `xrSession.requestHitTestSource(...)`: Creëert een XRHitTestSource, die de oorsprong en richting van de straal definieert. In dit basisvoorbeeld gebruiken we de 'viewer' referentieruimte, wat overeenkomt met het gezichtspunt van de gebruiker.

Stap 2: De Render Loop Creëren

De render loop is het hart van je WebXR-applicatie. Hier update je de scène en render je elk frame. Binnen de render loop voer je de hit test uit en update je de positie van je virtuele object.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update de positie en oriëntatie van je virtuele object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Maak het object zichtbaar wanneer een hit wordt gevonden
    } else {
      object3D.visible = false; // Verberg het object als er geen hit wordt gevonden
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Uitleg:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Voert de hit test uit met de eerder gemaakte XRHitTestSource. Het retourneert een array van XRHitTestResult-objecten, die alle gevonden snijpunten vertegenwoordigen.
• `hitTestResults[0]`: We nemen het eerste hit-resultaat. In complexere scenario's wil je misschien door alle resultaten itereren en het meest geschikte kiezen.
• `hit.getPose(xrReferenceSpace)`: Haalt de pose (positie en oriëntatie) van de hit op in de opgegeven referentieruimte.
• `object3D.position.set(...)` en `object3D.quaternion.set(...)`: Update de positie en oriëntatie van je virtuele object (object3D) zodat deze overeenkomen met de hit pose. Dit plaatst het object op het snijpunt.
• `object3D.visible = true/false`: Regelt de zichtbaarheid van het virtuele object, waardoor het alleen verschijnt wanneer een hit wordt gevonden.

Stap 3: Je 3D Scène Instellen (Voorbeeld met Three.js)

Dit voorbeeld gebruikt Three.js, een populaire JavaScript 3D-bibliotheek, om een eenvoudige scène met een kubus te creëren. Je kunt dit aanpassen om andere bibliotheken zoals Babylon.js of A-Frame te gebruiken.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // WebXR inschakelen
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm kubus
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Object initieel verbergen
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* Geen animatieloop hier. WebXR regelt dit. */ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Camera naar achteren verplaatsen
}

// Roep initXR() aan om de WebXR-ervaring te starten
initXR();

            

              
                Copy
              
            
          

Belangrijk: Zorg ervoor dat je de Three.js bibliotheek in je HTML-bestand opneemt:

            


            

              
                Copy
              
            
          

Geavanceerde Technieken en Optimalisaties

De bovenstaande basisimplementatie biedt een fundament voor WebXR hit testing. Hier zijn enkele geavanceerde technieken en optimalisaties om te overwegen terwijl je complexere ervaringen bouwt:

1. Hit Test Resultaten Filteren

In sommige gevallen wil je hit test resultaten filteren om alleen specifieke soorten oppervlakken te overwegen. Je wilt bijvoorbeeld alleen objectplaatsing toestaan op horizontale oppervlakken (vloeren of tafels). Je kunt dit bereiken door de normaalvector van de hit pose te onderzoeken en deze te vergelijken met de omhoog gerichte vector.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Controleer of het oppervlak ongeveer horizontaal is
  const upVector = new THREE.Vector3(0, 1, 0); // Wereld omhoog vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Normaal naar wereldruimte roteren

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Pas de drempelwaarde (0.9) aan indien nodig
    // Oppervlak is ongeveer horizontaal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. Gebruik Maken van Tijdelijke Invoerbronnen

Voor meer geavanceerde invoermethoden zoals handtracking, gebruik je doorgaans tijdelijke invoerbronnen. Tijdelijke invoerbronnen vertegenwoordigen tijdelijke invoerevenementen, zoals een vinger tik of een handgebaar. De WebXR Input API stelt je in staat om toegang te krijgen tot deze gebeurtenissen en hit test bronnen te creëren op basis van de positie van de hand van de gebruiker.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Creëer een hit test bron uit de target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Plaats een object op de hit locatie
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Ruim de hit test bron op
    });
  }
});

            

              
                Copy
              
            
          

3. Prestaties Optimaliseren

WebXR ervaringen kunnen rekenintensief zijn, vooral op mobiele apparaten. Hier zijn enkele tips voor het optimaliseren van prestaties:

• Verlaag de Frequentie van Hit Tests: Hit tests uitvoeren bij elk frame kan duur zijn. Overweeg de frequentie te verlagen, vooral als de beweging van de gebruiker langzaam is. Je kunt een timer gebruiken of hit tests alleen uitvoeren wanneer de gebruiker een actie initieert.
• Gebruik een Bounding Volume Hierarchy (BVH): Als je een complexe scène hebt met veel objecten, kan het gebruik van een BVH de botsingsdetectie aanzienlijk versnellen. Three.js en Babylon.js bieden BVH-implementaties.
• LOD (Level of Detail): Gebruik verschillende detailniveaus voor je 3D-modellen, afhankelijk van hun afstand tot de camera. Dit vermindert het aantal polygonen dat gerenderd moet worden voor objecten op afstand.
• Occlusie Culling: Render geen objecten die verborgen zijn achter andere objecten. Dit kan de prestaties in complexe scènes aanzienlijk verbeteren.

4. Omgaan met Verschillende Referentieruimtes

WebXR ondersteunt verschillende referentieruimtes, die het coördinatensysteem definiëren dat wordt gebruikt voor het volgen van de positie en oriëntatie van de gebruiker. De meest voorkomende referentieruimtes zijn:

• Local: De oorsprong van het coördinatensysteem is vastgezet ten opzichte van de startpositie van de gebruiker. Dit is geschikt voor ervaringen waarbij de gebruiker zich in een klein gebied bevindt.
• Bounded-floor: De oorsprong bevindt zich op vloerniveau, en het XZ-vlak vertegenwoordigt de vloer. Dit is geschikt voor ervaringen waarbij de gebruiker zich in een kamer kan bewegen.
• Unbounded: De oorsprong is niet vastgezet en de gebruiker kan zich vrij bewegen. Dit is geschikt voor grootschalige AR-ervaringen.

Het kiezen van de juiste referentieruimte is belangrijk om ervoor te zorgen dat je WebXR-ervaring correct werkt in verschillende omgevingen. Je kunt een specifieke referentieruimte aanvragen wanneer je de XR-sessie maakt.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. Omgaan met Apparaatcompatibiliteit

WebXR is een relatief nieuwe technologie en niet alle browsers en apparaten ondersteunen deze even goed. Het is belangrijk om te controleren op WebXR-ondersteuning voordat je probeert een WebXR-sessie te initialiseren.

            
if (navigator.xr) {
  // WebXR wordt ondersteund
  initXR();
} else {
  // WebXR wordt niet ondersteund
  console.error('WebXR wordt niet ondersteund in deze browser.');
}

            

              
                Copy
              
            
          

Je moet je WebXR-ervaring ook testen op verschillende apparaten om er zeker van te zijn dat deze correct werkt.

Internationale Overwegingen

Bij het ontwikkelen van WebXR-applicaties voor een wereldwijd publiek is het belangrijk om rekening te houden met internationalisering (i18n) en lokalisatie (l10n).

• Tekst en UI-Elementen: Gebruik een lokalisatiebibliotheek om tekst en UI-elementen in verschillende talen te vertalen. Zorg ervoor dat je UI-layout verschillende tekstlengtes kan accommoderen. Duitse woorden zijn bijvoorbeeld vaak langer dan Engelse woorden.
• Meeteenheden: Gebruik geschikte meeteenheden voor verschillende regio's. Gebruik bijvoorbeeld meters en kilometers in de meeste landen, maar voeten en mijlen in de Verenigde Staten en het Verenigd Koninkrijk. Sta gebruikers toe hun voorkeursmeeteenheden te kiezen.
• Datum- en Tijdformaten: Gebruik geschikte datum- en tijdformaten voor verschillende regio's. Gebruik bijvoorbeeld het YYYY-MM-DD-formaat in sommige landen en het MM/DD/YYYY-formaat in andere.
• Valuta's: Toon valuta's in het juiste formaat voor verschillende regio's. Gebruik een bibliotheek om valutaomrekeningen af te handelen.
• Culturele Gevoeligheid: Wees bewust van culturele verschillen en vermijd het gebruik van afbeeldingen, symbolen of taal die voor sommige culturen aanstootgevend kunnen zijn. Bepaalde handgebaren kunnen bijvoorbeeld verschillende betekenissen hebben in verschillende culturen.

WebXR Ontwikkeltools en Bronnen

Verschillende tools en bronnen kunnen je helpen bij WebXR-ontwikkeling:

• Three.js: Een populaire JavaScript 3D-bibliotheek voor het creëren van WebGL-gebaseerde ervaringen.
• Babylon.js: Een andere krachtige JavaScript 3D-engine met de focus op WebXR-ondersteuning.
• A-Frame: Een webframework voor het bouwen van VR-ervaringen met behulp van HTML.
• WebXR Emulator: Een browser-extensie waarmee je WebXR-ervaringen kunt testen zonder dat je een fysiek VR- of AR-apparaat nodig hebt.
• WebXR Device API Specificatie: De officiële WebXR-specificatie van het W3C.
• Mozilla Mixed Reality Blog: Een geweldige bron om te leren over WebXR en gerelateerde technologieën.

Conclusie

De WebXR Hit Test Manager is een krachtig hulpmiddel voor het creëren van interactieve en immersieve AR/VR-ervaringen. Door de concepten van ray casting en de Hit Test API te begrijpen, kun je boeiende applicaties bouwen waarmee gebruikers op een natuurlijke en intuïtieve manier kunnen interageren met de virtuele wereld. Naarmate WebXR-technologie zich blijft ontwikkelen, zijn de mogelijkheden voor het creëren van innovatieve en boeiende ervaringen eindeloos. Vergeet niet je code te optimaliseren voor prestaties en rekening te houden met internationalisering bij het ontwikkelen voor een wereldwijd publiek. Omarm de uitdagingen en beloningen van het bouwen van de volgende generatie immersieve webervaringen.